<template>
    <div>
        <router-link to="/login" id="toLogin"></router-link>
        <!-- <top-bar title="个人业绩"></top-bar> -->
        <div class="topbar">
            <a href="javascript:history.back(-1)" style="position:absolute;left:4vw;color:#ffffff"><img src="@/images/neitui/arrow-left.png" alt="" style="width:15px"></a>
            个人业绩
            <router-link to="/cashApply" style="position:absolute;right: 4vw;color:#ffffff;font-size:15px">提现</router-link>
        </div>
        <achievement-top :data="data"></achievement-top>
        <div class="achievement">
            <span class="achievementMonth" @click="isPopChange">{{month}}月&nbsp;&nbsp;<img src="@/images/neitui/sanjiao.png" style="width:12px"></span>
            <span class="achievementNumber">销售额<span style="color:#FF4C50">{{data.monthOrderMoney}}</span>元&nbsp;&nbsp;&nbsp;提成<span style="color:#FF4C50">{{data.monthExtractMoney}}</span>元</span>
        </div>
        <achievement-list :list="data.month_list" v-if="data.month_list.length>0"></achievement-list>
        <div style="text-align:center;padding-top:50px" v-else>
            <img src="@/images/neitui/21.png" alt="" style="width:275px">
            <p style="margin-top:10px">暂无提成，请继续努力哟~~~</p>
        </div>
        <pop-time-chioce @year="yearChange" @month="monthChange" v-if="isPop" @isPop1="req" @isPop="none" :year1="year" :month1="month"></pop-time-chioce>
    </div>
</template>

<script>
    import request from '@/request/index.js'
    import topBar from '@/components/common/topBar1.vue'
    import achievementTop from '@/components/achievement/achievementTop.vue'
    import achievementList from '@/components/achievement/achievementList.vue'
    import popTimeChioce from '@/components/common/popTimeChioce.vue'

    export default {
        name: "achievement",
        components:{
            topBar,
            achievementTop,
            achievementList,
            popTimeChioce,
        },
        data() {
            return {
                token:'',
                months:'',
                month:'',
                year:'',
                data:{},
                isPop:false
            };
        },
        methods:{
            buttonChange:function(val){
                this.is_effective=val;
                request.getAchievement(this);
            },
            isPopChange:function(){
                this.isPop=true;
            },
            yearChange:function(val){
                this.year=val;
            },
            monthChange:function(val){
                this.month=val;
            },
            none:function(){
                this.isPop=false;
            },
            req:function(){
                this.isPop=false;
                request.getAchievement(this);
            }
        },
        watch:{
            is_effective(newVal,oldVal){
　　　　　　},
        },
        created(){
        },
        mounted(){
            const loading = this.$loading({
                // ...options
                color:'#55A9FF',
                overlayColor:'rgba(0,0,0,.5)',
                className: 'loadingStyle',
            });
            if(this.$route.query.token){
                this.$cookie.set('token',this.$route.query.token,7);
                this.token=this.$cookie.get('token');
            }else{
                if(this.$cookie.get('token')){
                    this.token=this.$cookie.get('token');
                }
                else{
                    document.getElementById('toLogin').click();
                }
            }
                
                var date=new Date;
                this.year=date.getFullYear(); 
                this.month=date.getMonth()+1;
                request.getAchievement(this,loading);          
        }
    }
</script>

<style scoped lang="scss">
.topbar{
    background:#55A9FF;
    color:#ffffff;
    text-align: center;
    font-size: 18px;
    line-height: 45px;

  }
    .achievement{
            width: 92vw;
            margin: 0 auto;
        }
        .achievementMonth{
            font-size: 24px;
            color: #333333;
            line-height: 3em;
        }
        .achievementNumber{
            font-size: 15px;
            color: #333333;
            float: right;
            margin-top: 25px;
        }
</style>
